<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>弹性项目</title>
        <style type="text/css">
            .wrapper{ margin: 25px auto; border: 1px solid blue; box-shadow: 0 0 20px -10px blue;}
            p { text-align: center; font-weight: bold;}
            /* 设置 display 为 flex 是为了让元素成为 弹性容器 (flex container) */
            .flex-container { display: flex; margin: 15px auto; border: 1px solid gray; width: 400px; height: 400px;}
            .flex-item:nth-child(2n) { background: #dfdfdf;}
            .flex-item:nth-child(2n+1) { background: #ff8;}

            .direction-row { 
                /* 以水平方向从左到右为 弹性容器 主轴的方向 */
                flex-direction: row; 
                /* 设置 弹性项目 在 弹性容器 交叉轴 方向的排列方式 */
                align-items: flex-end;
            }
            .direction-row span { 
                /* 设置 弹性项目 伸缩基准值 ( 主轴方向的尺寸 ) */
                flex-basis: 100px; 
                /* 因为当前的弹性容器主轴是水平方向从左到右，因此可以通过 height 来设置 cross size */
                height: 300px;
            }
            .direction-row span:nth-child(2) {
                /* 单独设置 当前弹性项目 在 弹性容器 交叉轴方向 的排列方式 */
                align-self: flex-start;
            }

            .direction-column { 
                /* 以垂直方向从上到下为 弹性容器 主轴的方向 */
                flex-direction: column; 
                /* 设置 弹性项目 在 弹性容器 交叉轴 方向的排列方式 */
                align-items: center;
             }
             .direction-column.first span { 
                /* flex-basis: 设置 弹性项目 伸缩基准值 */
                flex-basis: 200px; 
                /* 因为当前的弹性容器主轴是垂直方向从上到下，因此可以通过 width 来设置 cross size */
                width: 300px;
            }
            .direction-column.first span:nth-child(2) {
                align-self: flex-end;
            }
        </style>
    </head>
    <body>
        
        <div class="wrapper">
            <p>弹性容器的主轴(main axis)是水平方向从左到右(flex-direction: row)</p>
            <div class="flex-container direction-row">
                <span class="flex-item">A</span>
                <span class="flex-item">B</span>
                <span class="flex-item">C</span>
            </div>
        </div>

        <div class="wrapper">
            <p>弹性容器的主轴(main axis)是垂直方向从上到下(flex-direction: column)</p>
            <div class="flex-container direction-column first">
                <span class="flex-item">A</span>
                <span class="flex-item">B</span>
                <span class="flex-item">C</span>
            </div>
        </div>
        
    </body>
</html>